<template>
  <div class="management-wrapper">
    <div class="background-overlay"></div>

    <div class="content-card">
      <h2 class="page-title">学生管理页 - MBTI 测试记录</h2>

      <el-table
          v-if="students.length > 0"
          :data="students"
          style="width: 100%"
          border
          :expand-row-keys="expandedRows"
          @expand-change="handleExpandChange"
          row-key="studentNo"
      >
        <!-- 展开行显示历史记录 -->
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.records" border style="width: 100%;">
              <el-table-column prop="studentNo" label="学号" width="120" />
              <el-table-column prop="studentName" label="姓名" width="120" />
              <el-table-column prop="mbtiType" label="MBTI 类型" width="100" />
              <el-table-column prop="testTime" label="测试时间" width="180">
                <template #default="{ row }">
                  {{ formatDate(row.testTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="analysis" label="分析" />
            </el-table>
            <div v-if="props.row.records.length === 0" class="no-records">暂无测试结果</div>
          </template>
        </el-table-column>

        <!-- 基本信息列 -->
        <el-table-column prop="studentNo" label="学号" width="120" />
        <el-table-column prop="studentName" label="姓名" width="120" />
        <el-table-column prop="className" label="班级" width="120" />
        <el-table-column prop="majorName" label="专业" width="150" />
        <el-table-column prop="collegeName" label="学院" width="150" />
      </el-table>

      <div v-else class="no-data-tip">
        暂无学生数据
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "StudentManagement",
  data() {
    return {
      students: [],
      expandedRows: [],
    };
  },
  methods: {
    fetchStudentRecords() {
      axios
          .get("http://localhost:8081/api/student-management/record")
          .then((res) => {
            this.students = res.data;
          })
          .catch((err) => {
            console.error("获取学生管理数据失败:", err);
            this.$message.error("获取学生数据失败");
          });
    },
    formatDate(datetimeStr) {
      if (!datetimeStr) return "";
      const dt = new Date(datetimeStr);
      return dt.toLocaleString();
    },
    handleExpandChange(row, expanded) {
      if (expanded && !this.expandedRows.includes(row.studentNo)) {
        this.expandedRows.push(row.studentNo);
      } else {
        this.expandedRows = this.expandedRows.filter((no) => no !== row.studentNo);
      }
    },
  },
  mounted() {
    this.fetchStudentRecords();
  },
};
</script>

<style scoped>
.management-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd, #fce4ec);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 40px;
  position: relative;
}

.background-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 70%),
  radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.2), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.content-card {
  background: #ffffffcc;
  padding: 30px 40px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  max-width: 1000px;
  width: 100%;
  z-index: 1;
  font-family: Arial, sans-serif;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.no-data-tip,
.no-records {
  text-align: center;
  color: #888;
  font-size: 16px;
  padding: 12px;
}
</style>
